<template>
	<div class="container">
		<JxNavbar title='发布动态' />
		<div class="container-box">
			<div class="form-item uv-border-bottom">
				<view class="item-title item-title-required">
					<text>标题</text>
					<text>{{ formData['title']['length'] }}/30</text>
				</view>
				<view class="item-input">
					<input v-model="formData['title']" type="text" maxlength="30" placeholder="点击输入有趣的标题" />
				</view>
			</div>

			<div class="form-item uv-border-bottom">
				<view class="item-title">
					<text>内容</text>
					<text>{{ formData['body']['length'] }}/200</text>
				</view>
				<view class="item-input">
					<textarea v-model="formData['body']" type="text" maxlength="200" placeholder="点击输入动态内容，禁止发布违反规定、涉嫌违法犯罪等信息" />
				</view>
			</div>

			<div class="form-item form-item-overhead uv-border-bottom">
				<view class="item-title">
					<text>顶置</text>
					<text class="tips" v-if="goldData['overhead']">(顶置消耗{{ goldData['overhead'] }}金币)</text>
				</view>
				<div class="item-contact">
					<div class="contact-left">
						<text :class="{ active: formData['is_sticky'] === 0 }" @click="formData['is_sticky'] = 0">否</text>
						<text :class="{ active: formData['is_sticky'] === 1 }" @click=" formData['is_sticky'] = 1">是</text>
					</div>
				</div>
			</div>

			<div class="form-item" v-if="!audit">
				<view class="item-title">
					<text>联系方式</text>
					<text class="tips">(选填)</text>
				</view>
				<div class="item-contact">
					<div class="contact-left">
						<text :class="{ active: formData['contact_type'] === 'qq' }" @click="formData['contact_type'] = 'qq'">QQ</text>
						<text :class="{ active: formData['contact_type'] === 'weixin' }" @click=" formData['contact_type'] = 'weixin'">微信</text>
					</div>
					<div class="contact-right uv-border-bottom">
						<input v-model="formData['contact']" type="text" placeholder="点击输入联系方式" maxlength="30">
					</div>
				</div>
			</div>


			<div class="topic" @click="chooseTopic">
				<div class="topic-left choose" v-if="menuData['menu_id']">
					<image :src="$surl('/publish/topic-title.png')" mode="widthFix"></image>
					<text>{{ menuData['name'] }}</text>
				</div>

				<div class="topic-left" v-else>
					<image :src="$surl('/publish/topic.png')" mode="widthFix"></image>
					<text>动态所属板块</text>
				</div>

				<i class="iconfont icon-right"></i>
			</div>

			<div class="add-images">
				<div class="add-images-title">
					<image :src="$surl('/publish/new_add.png')" mode="widthFix"></image>
					<text>添加图片(选填)</text>
					<text class="num">{{ fileList['length'] }}/9</text>
				</div>
				<uv-upload :fileList="fileList" multiple :maxCount="9" accept='image' @afterRead="afterRead" @delete="deletePic"></uv-upload>
			</div>

			<div class="btn">
				<uv-button color='#f56c6c' shape='circle' type='primary' :customTextStyle="{ fontSize: '32rpx' }" :customStyle="{ height: '88rpx' }"
					:loading='loading' @click="onsubmit">直接发布<span v-if="consumeGold" class="consume-text">(消费{{ consumeGold }}金币)</span></uv-button>
			</div>
		</div>

		<jx-userinfo-popup ref="userInfoPopupRef" />
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import users from '@/api/users/index.js'
import file from '@/utils/file/index.js'
import tools from '@/utils/tools/index.js'
import { useUserStore } from '@/store/user.js'
import articles from '@/api/articles/index.js'
import { useGeneralStore } from '@/store/general.js'
import JxNavbar from '@/components/navbar/index.vue'

const test = uni.$uv.test;
const userStore = useUserStore();
const generalStore = useGeneralStore();
const userInfo = computed(() => userStore.userInfo);
const audit = computed(() => generalStore.systemData.base.audit);

const userInfoPopupRef = ref(null);

const loading = ref(false);
const radiovalue = ref('');
const fileList = ref([]);
const formData = ref({ title: '', body: '', contact_type: "qq", contact: '', menu: {}, school: {}, cover: [], is_sticky: 0 });

const menuData = computed(() => {
	const { _id, name, mode, url, icon } = userStore.chooseTopic;
	return { menu_id: _id, name, mode, url, icon }
});

const goldData = computed(() => generalStore.systemData.gold);
const consumeGold = computed(() => {
	const publish = generalStore.systemData.gold.publish;
	const overhead = formData['value']['is_sticky'] ? generalStore.systemData.gold.overhead : 0;
	return +publish + +overhead;
});

async function onsubmit() {
	// 校验是否登录
	if (!userStore.token) return userStore.init();

	formData.value.menu = menuData.value;
	formData.value.cover = fileList.value.map(item => item['path']);

	// 校验规则
	if (validateForm()['length']) return;

	// 校验金币
	if (userStore.checkGold(consumeGold.value)) return;

	// 更新昵称
	if (!userInfo.value.user_info_update) {
		return userInfoPopupRef.value.open();
	}

	loading.value = true;
	tools.loading();
	const response = await articles.submit({ ...formData.value });
	uni.hideLoading();
	loading.value = false;
	if (response['code'] === 200) {
		tools.toast({
			title: '发布成功',
			icon: 'success',
			fun: () => {
				uni.switchTab({
					url: '/pages/index/index?loading=1'
				})
			}
		})
	}
}

function validateForm() {
	const errors = [];
	const { title, menu, school } = formData.value;

	!title && (errors.push('请输入有趣的标题'));
	!menu['menu_id'] && (errors.push('请选择动态所属板块'));

	if (errors['length']) {
		tools.toast({ title: errors[0] })
	}

	return errors;
}


async function afterRead(event) {
	let lists = [].concat(event.file)
	let fileListLen = fileList.value.length

	lists.forEach(item => {
		fileList.value.push({ ...item, status: 'uploading', message: '上传中' })
	})

	for (let item of lists) {
		const response = await file.uploadFile(item['url']);
		if (response['code'] === 200) {
			const data = Object.assign(response['data'], { status: 'success', url: item['thumb'] })
			fileList.value.splice(fileListLen, 1, data)
		} else {
			fileList.value.splice(fileListLen, 1)
			fileListLen--;
		}
		fileListLen++;
	}
}

function deletePic(event) {
	fileList.value.splice(event.index, 1)
}

function chooseTopic() {
	uni.navigateTo({
		url: '/pages/sub/main/publish/chooseTopic/index'
	})
}
</script>

<style lang="scss" scoped>
.container-box {
	padding: 0 $side-width;

	.form-item {
		padding-top: 30rpx;

		.item-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 10rpx;

			text:nth-child(1) {
				font-size: 32rpx;
				font-weight: 500;
			}

			text:nth-child(2) {
				font-size: 28rpx;
				color: $uv-tips-color;
			}

			.tips {
				color: $uv-tips-color;
				flex: 1;
			}
		}

		.item-input {
			min-height: 90rpx;

			input {
				height: 90rpx;
				font-size: 30rpx;
			}

			textarea {
				height: 200rpx;
				font-size: 30rpx;
			}
		}

		.item-contact {
			display: flex;
			align-items: center;

			.contact-left {
				display: flex;
				align-items: center;

				text {
					width: 100rpx;
					height: 55rpx;
					background: $uv-bg-color;
					border-radius: 5px;
					border-radius: 1px solid $uv-bg-color;
					box-sizing: border-box;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					margin-right: $side-width;
				}

				.active {
					border: 1px solid $uv-error;
					background: #ffe8e8;
					color: $uv-error ;
				}
			}

			.contact-right {
				height: 75rpx;
				flex: 1;

				input {
					height: 75rpx;
					font-size: 30rpx;
				}
			}
		}

		.item-title-required {
			text:first-child {
				&::after {
					content: "*";
					color: $uv-error;
					margin-left: 8rpx;
				}
			}
		}
	}

	.form-item-overhead {
		.item-contact {
			padding-bottom: 16rpx;
			padding-top: 16rpx;
		}
	}

	.topic {
		width: 100%;
		height: 118rpx;
		border-radius: 3px;
		padding: 0 $side-width;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		background: $uv-bg-color;
		margin-top: $side-width;

		.topic-left {
			display: flex;
			align-items: center;

			image {
				width: 36rpx;
				height: 36rpx;
			}

			text {
				margin-left: 6px;
			}
		}

		.choose {
			text {
				color: $uv-primary-dark;
			}
		}

		.icon-right {
			font-size: 26rpx;
			color: $uv-tips-color;
		}
	}

	.school {
		display: flex;
		align-items: center;
		padding-top: $side-width;

		image {
			width: 42rpx;
			height: 42rpx;
		}

		text {
			color: $uv-tips-color;
			margin-left: 6rpx;
		}
	}

	.add-images {
		.add-images-title {
			display: flex;
			align-items: center;
			padding: $side-width 0;

			image {
				width: 36rpx;
				height: 36rpx;
			}

			text {
				color: $uv-tips-color;
				margin-left: 12rpx;
			}

			.num {
				text-align: right;
				flex: 1;
				font-size: 28rpx;
			}
		}
	}

	.btn {
		margin-top: 80rpx;
		margin-bottom: 40upx;

		.consume-text {
			font-size: 26rpx;
			padding-left: 10rpx;
		}
	}
}
</style>